<template>
  <div class="container">
    <el-dialog
      title="商超发票管理详情"
      :visible.sync="dialog.dialogVisible"
      width="95%"
      center
      @open="getData"
      :lock-scroll="true"
      @close="closeDialog"
    >
      <el-table
        :data="tableData"
        border
        max-height="600"
        :summary-method="getSummaries"
        show-summary
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.status != 1"
              type="primary"
              icon="el-icon-view"
              @click="lookBtn(scope)"
              >查看匹配发票期数</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="xmmc"
          label="项目名称"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="ggxh"
          label="规格型号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dw"
          label="单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xmsl"
          label="项目数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xmje"
          label="项目金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="项目总金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="statusMsg"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="se"
          label="税额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        width="80%"
        center
        title="发票列表"
        :visible.sync="innerDialog"
        append-to-body
      >
        <div class="tagCenter">
          <el-tag v-for="item in tags" :key="item.fphm"
            >期数：{{ item.start_date }}至{{ item.end_date }}</el-tag
          >
        </div>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <!-- <pagination
        @page="handleSizeChange"
        @pagesize="handleCurrentChange"
        :pageData="pageData"
      ></pagination> -->
  </div>
</template>
<script>
import { getSmkInvoiceDetail, showPeriodsSmk } from "@/api/bill";
import Pagination from "@/components/pagination";
export default {
  props: {
    dialog: Object,
    pagination: Pagination
  },
  data() {
    return {
      tableData: [],
      tags: [],
      innerDialog: false,
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper"
      }
    };
  },
  created() {},
  methods: {
    //总价
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (
            index != 3 &&
            index != 4 &&
            index != 5 &&
            index != 7 &&
            index != 8
          ) {
            sums[index] = "";
          } else {
            sums[index] = sums[index].toFixed(4);
          }
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    getData() {
      let data = {
        id: this.dialog.id
      };
      getSmkInvoiceDetail(data).then(res => {
        if (res.code == 0) {
          res.data.details.forEach(prop => {
            switch (prop.status) {
              case 1:
                prop.statusMsg = "未匹配";
                break;
              case 2:
                prop.statusMsg = "部分匹配";
                break;
              case 3:
                prop.statusMsg = "已匹配完成";
                break;
            }
          });
          this.tableData = res.data.details;
        }
      });
    },
    //查看发票
    lookBtn(scope) {
      this.innerDialog = true;
      let data = {
        id: scope.row.file_id,
        detail_id: scope.row.id
      };
      showPeriodsSmk(data).then(res => {
        if (res.code == 0) {
          this.tags = res.data.list;
        }
      });
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.getData();
    },
    //取消
    closeDialog() {
      this.tableData = [];
      this.dialog.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.top {
  position: relative;
  /* height: 40px; */
}
.main {
  display: flex;
  justify-content: center;
}
.add {
  margin: 10px 0;
  margin-left: auto;
}
.inp {
  border: 1px solid #eee;
  width: 500px;
  padding-left: 10px;
  border-radius: 5px;
  height: 42px;
}
</style>
